<!--
  生物档案
-->
<template>
  <BaseMainSlot>
    <template v-slot:searchbox>
      <div class="label-input mr-20">
        <div class="label">个体名称:</div>
        <div class="input">
          <el-select
            v-model="queryId"
            placeholder="请选择"
            clearable
            filterable
            @change="changeName"
          >
            <el-option
              v-for="(item, index) in dropDownData"
              :key="index + 'select'"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">耳标:</div>
        <div class="input">
          <el-input v-model="eagTag" placeholder="请输入耳标查询" clearable />
        </div>
      </div>
      <div class="search ml-20" @click="checkData(queryId, eagTag)">
        <img src="~@/assets/action-bar-icon/search.png" />
      </div>
    </template>
    <template v-slot:content>
      <el-row :gutter="25">
        <el-col :span="6">
          <div class="img">
            <img
              src="~@/assets/commont/sheep.png"
              alt
              style="height: 100%; width: 100%"
            />
            <img :src="imgSrc" class="status" />
          </div>
        </el-col>
        <el-col :span="18">
          <el-row class="bar">
            <el-col :span="4">个体品种 {{ showData.plantVarietyName }}</el-col>
            <el-col :span="4">个体名称 {{ showData.name }}</el-col>
            <el-col :span="4">耳标 {{ showData.eagTag }}</el-col>
            <el-col :span="4">性别 {{ showData.genderName }}</el-col>
            <el-col :span="4">体重 {{ showData.weight }}</el-col>
            <el-col :span="4">皮毛等级 {{ showData.clothingHairName }}</el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="12" style="font-weight:600;">亲本信息 </el-col>
            <el-col :span="12" style="font-weight:600;">交配信息 </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="12">
              <div class="RAMS">
                <div v-show="fatherInfo.length !== 0" class="ram">
                  <span
                    v-for="(item, index) in fatherInfo"
                    :key="index"
                    class="rambar evebar"
                    @click="checkDetail(item)"
                  >{{ item.name }}</span>
                </div>
                <div v-show="fatherInfo.length === 0" class="ram">
                  <span class="evebar">父本信息</span>
                </div>
                <ul class="detail">
                  <li>
                    <span>种养品种 </span>
                    <span class="detailBox">{{
                      romInfo.plantVarietyName
                    }}</span>
                  </li>
                  <li>
                    <span>个体耳标 </span>
                    <span class="detailBox">{{ romInfo.eagTag }}</span>
                  </li>
                  <li>
                    <span>个体名称 </span>
                    <span class="detailBox">{{ romInfo.name }}</span>
                  </li>
                  <li>
                    <span>出生日期 </span>
                    <span class="detailBox">{{ romInfo.birthday }}</span>
                  </li>
                  <li>
                    <span>皮毛等级 </span>
                    <span class="detailBox">{{
                      romInfo.clothingHairName
                    }}</span>
                  </li>
                </ul>
              </div>
              <div class="EVES">
                <div class="eve">
                  <span class="evebar">母本信息</span>
                </div>
                <ul class="detail">
                  <li>
                    <span>种养品种 </span>
                    <span class="detailBox">{{
                      eveInfo.plantVarietyName
                    }}</span>
                  </li>
                  <li>
                    <span>个体耳标 </span>
                    <span class="detailBox">{{ eveInfo.eagTag }}</span>
                  </li>
                  <li>
                    <span>个体名称 </span>
                    <span class="detailBox">{{ eveInfo.name }}</span>
                  </li>
                  <li>
                    <span>出生日期 </span>
                    <span class="detailBox">{{ eveInfo.birthday }}</span>
                  </li>
                  <li>
                    <span>皮毛等级 </span>
                    <span class="detailBox">{{
                      eveInfo.clothingHairName
                    }}</span>
                  </li>
                </ul>
              </div>
            </el-col>

            <el-col :span="12">
              <el-table
                class="tableDeatail"
                :data="matingInfo"
                height="220px"
                border
                stripe
              >
                <el-table-column label="序号" type="index" width="55" />
                <el-table-column label="交配时间" prop="raiseTime" />
                <el-table-column label="母羊名称" prop="name" />
                <el-table-column label="母羊耳标" prop="eagTag" />
                <el-table-column label="母羊种类" prop="plantVarietyName" />
                <el-table-column label="产出羊仔数" prop="situation" />
              </el-table>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin: 10px 0 5px">
        <el-col :span="11" style="margin:3px 2%;font-weight:600;">疫苗接种记录 </el-col>
        <el-col :span="11" style="margin:3px 2%;font-weight:600;">繁育记录 </el-col>
      </el-row>
      <el-row>
        <el-col :span="11" style="margin:0 2%">
          <el-table :data="vaccinationList" border stripe max-height="200">
            <el-table-column label="序号" type="index" width="55" />
            <el-table-column label="疫苗名称" prop="vaccinumName" />
            <el-table-column label="接种方式" prop="vaccinationWay" />
            <el-table-column label="疫苗剂量" prop="dosage" />
            <el-table-column label="接种时间" prop="vaccinationDate">
              <template slot-scope="scope">{{
                scope.row.vaccinationDate
                  ? formatDateTime(scope.row.vaccinationDate)
                  : "-"
              }}</template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="11" style="margin:0 2%">
          <el-table :data="matingInfo" border stripe max-height="200">
            <el-table-column label="序号" type="index" width="55" />
            <el-table-column label="繁育时间">
              <template slot-scope="scope">{{
                scope.row.birthTime ? scope.row.birthTime : "-"
              }}</template>
              <!-- scope.row.birthTime?formatDateTime(scope.row.birthTime) :"-"  -->
            </el-table-column>
            <el-table-column label="羊仔个数" prop="nums" />
            <el-table-column label="母羊名称" prop="name" />
            <el-table-column label="母羊耳标" prop="eagTag" />
          </el-table>
        </el-col>
      </el-row>
    </template>
  </BaseMainSlot>
</template>

<script>
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import req from "@/api/digital-production/Individual-bio-management/biological-archives/index";
import reqs from "@/api/digital-production/breeding-management/individual-breeding-management/index";

import { mymixin } from "@/utils/mixin";
export default {
  name: "BiologicalArchives",
  components: {
    // Pagination,
    // ActionBar,
    BaseMainSlot
  },
  mixins: [mymixin],
  data() {
    return {
      imgSrc: "",
      eagTag: "",
      queryName: "",
      queryId: "",
      queryNumber: null,
      IndividualDiseaseInformation: {},
      addIndividualDiseaseInformationDialog: false,
      fatherInfo: [],
      romInfo: {},
      eveInfo: {},
      tableData: [],
      dropDownData: [],
      showData: {},
      vaccinationList: [],
      raiseRecordList: [], // 合养ID集合
      matingInfo: [],
      startTime: "",
      test: "",
      clothingHairList: [
        { name: "甲", value: "A" },
        { name: "乙", value: "B" },
        { name: "丙", value: "C" }
        // { name: "棉毛型", value: "LINTER" },
        // { name: "沙毛型", value: "ROAN" },
        // { name: "中间型", value: "MIDDLE" }
      ]
    };
  },
  async created() {
    await this.getQueryName();
    await this.checkData();
  },
  methods: {
    // 获取下拉框数据
    async getQueryName() {
      await req.getQueryBionAll("HuSheep").then((res) => {
        if (res.code === 1) {
          let result = res.data || [];
          result.forEach((item) => {
            this.dropDownData.push({
              name: item.name,
              id: item.bionId,
              number: item.number,
              gender: item.gender,
              clothingHair: item.clothingHair,
              weight: item.weight
            });
          });
        }
      });
    },

    // 改变下拉框名编号
    changeName(val) {},
    // 根据ID查询信息
    async getQuery(params) {
      this.raiseRecordIdList = [];
      return await req.getQuery(params).then((res) => {
        if (res.code === 1) {
          let result = res.data || {};
          this.vaccinationList = result.vaccinationList || [];
          this.raiseRecordList = result.raiseRecordList || [];
          this.fatherInfo = result.fatherInfo || [];
          this.eveInfo = result.motherInfo || {};
          this.showData = result.info;
          if (this.showData.gender === "FEMALE") {
            this.showData.genderName = "母";
          } else if (this.showData.gender === "MALE") {
            this.showData.genderName = "公";
          } else {
            this.showData.genderName = "";
          }
          this.clothingHairList.forEach((ITEM) => {
            if (this.showData.clothingHair === ITEM.value) {
              this.showData.clothingHairName = ITEM.name;
            }
            this.fatherInfo.forEach((item) => {
              if (ITEM.value === item.clothingHair) {
                item.clothingHairName = ITEM.name;
              }
              if (this.eveInfo.clothingHair === ITEM.value) {
                this.eveInfo.clothingHairName = ITEM.name;
              }
            });
          });
          this.romInfo = this.fatherInfo[0] || {}
          switch (this.showData.status) {
            case "SURVIVAL":
              this.imgSrc = require("@/assets/commont/breeding.png");
              break;
            case "DIED":
              this.imgSrc = require("@/assets/commont/die.png");
              break;
            case "SOLD":
              this.imgSrc = require("@/assets/commont/sold.png");
              break;
            default:
              this.imgSrc = "";
          }
        }
        return this.raiseRecordList;
      });
    },

    // 查看父本详情
    checkDetail(val) {
      this.romInfo = val;
    },
    // 点击查询数据
    checkData(val, eag) {
      this.imgSrc = "";
      this.fatherInfo = [];
      this.romInfo = {};
      this.eveInfo = {};
      this.matingInfo = [];
      this.vaccinationList = [];
      this.showData = {};
      let p1 = new Promise(function (resolve, reject) {
        if (eag) {
          req.getEagTag({ eagTag: eag, breed: "HuSheep" }).then((res) => {
            if (res.data) {
              let result = res.data || {};
              if (Object.prototype.hasOwnProperty.call(result, "bionId")) {
                val = result.bionId;
                resolve(val);
              } else {
                reject(val);
              }
            }
          });
        } else {
          reject(val);
        }
      });
      p1.then(
        (res) => {
          this.queryId = val;
          checkDetail();
        },
        (error) => {
          if (error) {
            checkDetail();
          }
        }
      );
      let checkDetail = () => {
        if (val) {
          this.getQuery(val).then((res) => {
            if (this.raiseRecordList) {
              reqs
                .getQueryByIdList({
                  raiseRecordIdList: this.raiseRecordList,
                  sex: this.showData.gender === "MALE"
                })
                .then((res) => {
                  let arr = [];
                  if (res.code === 1) {
                    let result = res.data || [];
                    result.forEach((item) => {
                      arr.push({
                        raiseTime: item.raiseTime,
                        plantVarietyName: item.plantVarietyName,
                        number: item.number,
                        name: item.name,
                        nums: item.nums,
                        situation: item.situation,
                        birthTime: item.birthTime,
                        eagTag: item.eagTag
                      });
                    });
                    this.matingInfo = arr;
                  }
                });
            }
          });
        }
      };
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
::v-deep .tableDeatail {
  width: 100%;
}
::v-deep .el-col-4 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
li {
  list-style: none;
}
.bar {
  padding: 10px;
  line-height: 20px;
  height: 40px;
  border: 1px solid rgba(23, 176, 203);
  border-radius: 5px;
  color: rgba(23, 176, 203);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.EVES,
.RAMS {
  width: 45%;
  float: left;
  height: 220px;
  //background: red;
  overflow: auto;
}
.ram,
.eve {
  padding: 0;
  width: 100%;
  white-space: nowrap;
  overflow: auto;
  display: flex;
  justify-content: center;
  // background: #ccc;
  cursor: pointer;
  :hover {
    //background: red;
    background: #ccc;
    border-radius: 5px;
  }
  .rambar {
    display: inline-block;
    margin: 5px;
    min-height: 30px;
    line-height: 30px;
    width: 70px;
    //background: limegreen;
    text-align: center;
  }
  .evebar {
    width: 100%;
    display: inline-block;
    margin: 5px;
    height: 30px;
    line-height: 30px;
    width: 70px;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 18%;
    font-size: 18px;
    // margin: 5px 10%;
    // background: limegreen;
    text-align: center;
  }
}
.detail {
  margin-top: 0px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  li {
    height: 32px;
    display: flex;
    align-items: center;
    span,
    .detailBox {
      display: inline-block;
      height: 20px;
    }
    .detailBox {
      width: 150px;
      margin-left: 5px;
      background: #a9a5bd63;
      line-height: 20px;
      white-space: nowrap;
      text-align: center;
      // text-overflow: ellipsis;
      overflow: hidden;
      //background: chartreuse;
    }
  }
}
::-webkit-scrollbar {
  background-color: #d8d8d8ff;
  border-radius: 7px;
  width: 5px;
  height: 5px;
}
.el-table--scrollable-y {
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    //background-color: #d8d8d8ff;
    background-color: red;
    border-radius: 7px;
    :hover {
      background-color: red;
      border-radius: 7px;
    }
  }
}
.el-table--scrollable-y {
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    :hover {
      width: 5px;
      height: 5px;
    }
  }
}
.img {
  position: relative;
  .status {
    position: absolute;
    left: 35px;
    top: 25px;
  }
}
</style>
